<template>
  <a-card>
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchList">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="频道名称">
              <a-input v-model="queryParam.name" />
            </a-form-item>
          </a-col>
          <a-col :md="16" :sm="24">
            <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
              <a-button type="primary" @click="searchList">查询</a-button>
              <a-button style="margin-left: 18px" @click="resetList">重置</a-button>
              <a-button style="margin-left: 18px" type="primary" icon="plus" @click="handleAdd">新建</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-tabs :activeKey="queryParam.status" @change="tabsChange">
      <a-tab-pane key="1" :tab="`进行中${running}`"></a-tab-pane>
      <a-tab-pane key="0" :tab="`未开始${wait}`" forceRender></a-tab-pane>
      <a-tab-pane key="2" :tab="'已结束'" forceRender></a-tab-pane>
    </a-tabs>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps">
      <span slot="status" slot-scope="text">
        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
      </span>
      <span slot="img" slot-scope="text">
        <img :src="text" alt="" class="thumbnail" />
      </span>
      <span slot="name" slot-scope="text">
        <ellipsis :length="4" tooltip>{{ text }}</ellipsis>
      </span>
      <span slot="endDate" slot-scope="text">
        {{ text | utc2beijing }}
      </span>
      <span slot="beginDate" slot-scope="text">
        {{ text | utc2beijing }}
      </span>
      <span slot="createTime" slot-scope="text">{{ text | utc2beijing }}</span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" v-show="queryParam.status != 2" />
          <a @click="showModal(record, 'online')" v-show="queryParam.status == 0">上线</a>
          <a @click="showModal(record, 'offline')" v-show="queryParam.status == 1">下线</a>
          <a-divider type="vertical" v-show="queryParam.status != 1" />
          <a @click="showModal(record, 'delete')" v-show="queryParam.status != 1">删除</a>
          <a-divider type="vertical" />
          <a-popover title="Title">
            <template slot="content">
              <img :src="record.codeUrl" alt="" class="codeimg" />
            </template>
            <a href="javascript:;">
              预览
            </a>
          </a-popover>
        </template>
      </span>
    </s-table>
    <a-modal v-model="visible" :title="`${modalText}频道`" @ok="handleOk">
      <p>确定{{ modalText }}本频道吗？</p>
    </a-modal>
  </a-card>
</template>
<style scoped>
.thumbnail {
  height: 100px;
}
</style>
<script>
import { STable, Ellipsis } from '../../components'
import { channelList, channelDelete, channelStartEnd } from '@/api/box/marketing'
import { routeMixin } from '@/views/box/util/routeMixin'
const columns = [
  {
    title: '频道名称',
    dataIndex: 'name',
    align: 'center',
    // scopedSlots: { customRender: 'id' },
    width: 130
  },
  {
    title: '图片',
    dataIndex: 'img',
    align: 'center',
    width: 150,
    scopedSlots: { customRender: 'img' }
  },
  {
    title: '上线时间',
    dataIndex: 'beginDate',
    align: 'center',
    scopedSlots: { customRender: 'beginDate' }
  },
  {
    title: '下线时间',
    dataIndex: 'endDate',
    align: 'center',
    scopedSlots: { customRender: 'endDate' }
  },
  {
    title: '排序值',
    dataIndex: 'priority',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'center',
    scopedSlots: { customRender: 'createTime' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '200px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]

const statusMap = {
  0: {
    status: 'error',
    text: '禁用'
  },
  1: {
    status: 'success',
    text: '启用'
  }
}

export default {
  mixins: [routeMixin],
  components: {
    STable,
    Ellipsis
  },
  data() {
    this.columns = columns
    return {
      // 查询参数
      queryParam: {
        status: '1' // 须String类型
      },
      wait: '',
      running: '',
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        // const requestParameters = Object.assign({}, parameter, this.queryParam)
        // console.log('loadData request parameters:', requestParameters)
        const queryParam = this.queryParam
        const data = {}
        data.page = parameter
        data.requestData = queryParam
        return channelList(data).then(res => {
          // console.log(res.data)
          if (res.code === 0) {
            const data = {
              data: res.data.data,
              page: res.page
            }
            this.wait = '(' + res.data.wait + ')'
            this.running = '(' + res.data.running + ')'
            // console.log(data)
            return data
          } else {
            this.$message.error(res.msg)
            const data = {
              page: {
                pageNo: 0,
                count: 0,
                pageSize: 10
              },
              data: []
            }
            return data
          }
        })
      },
      visible: false,
      mdl: {},
      modalText: '',
      modalType: ''
    }
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text
    },
    statusTypeFilter(type) {
      return statusMap[type].status
    }
  },
  watch: {
    $route(to, from) {
      // console.log(to, from)
      if (this.siblingNameList.includes(from.name) && to.path == this.currentPath) {
        console.log(12)
        this.$refs.table.refresh()
      } else if (this.siblingNameList.includes(to.name) && from.path == this.currentPath) {
      } else {
        if (to.path === this.currentPath && !this.siblingNameList.includes(from.name)) {
          this.queryParam.name = ''
          this.tabsChange('1')
        }
      }
    }
  },
  methods: {
    tabsChange(key) {
      this.queryParam.status = key
      this.$refs.table.refresh(true)
    },
    searchList() {
      // console.log(this.queryParam)
      this.$refs.table.refresh(true)
    },
    resetList() {
      this.queryParam.name = ''
      this.$refs.table.refresh(true)
    },
    handleAdd() {
      this.$router.push('/box/operations/channel/edit/add')
    },
    handleEdit(record) {
      this.$router.push(`/box/operations/channel/edit/${record.id}`)
    },
    handleDelete(record) {
      channelDelete(record.id)
        .then(res => {
          console.log(res)
          if (res.code === 0) {
            this.$message.success('删除成功！')
            this.visible = false
            this.$refs.table.refresh(true)
          } else {
            this.$message.success(res.msg)
          }
        })
        .catch(err => {
          console.log('handleDelete' + err)
        })
    },
    handleEnable(record) {
      channelStartEnd(record.id)
        .then(res => {
          console.log(res)
          if (res.code === 0) {
            this.$message.success('成功！')
            this.visible = false
            this.offline = {}
            this.$refs.table.refresh(true)
          } else {
            this.$message.success(res.msg)
          }
        })
        .catch(err => {
          console.log('handleEnable' + err)
        })
    },
    showModal(record, type) {
      // console.log(record, type)
      switch (type) {
        case 'online':
          this.modalText = '上线'
          this.modalType = 'online'
          break
        case 'offline':
          this.modalText = '下线'
          this.modalType = 'offline'
          break
        case 'delete':
          this.modalText = '删除'
          this.modalType = 'delete'
          break
      }
      this.visible = true
      this.mdl = record
    },
    handleOk(e) {
      console.log(e)
      switch (this.modalType) {
        case 'online':
          this.handleEnable(this.mdl)
          break
        case 'offline':
          this.handleEnable(this.mdl)
          break
        case 'delete':
          this.handleDelete(this.mdl)
          break
      }
    }
  }
}
</script>
<style scoped>
.codeimg {
  margin: 0 auto;
  display: block;
  width: 120px;
  height: 120px;
}
</style>

